<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['项目管理','小程序管理[随你运]','用户管理']" icon="fa fa-smile-o"
			class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	<sa-widgets-grid>
		<div class="s_table">
			<div sa-widget [editbutton]="false" color="darken" class="clearfix">
				<header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2>用户管理</h2>
				</header>
				<div>
					<div class="widget-body no-padding">
						<div class="page-header clearfix s_table_opreation">
							<div class="left page-header-btn" style="width: calc(100% - 230px);">
								<!-- <div class="top_module">
									<span class="module_text">车牌号码</span>
									<div class="s_hover_box">
										<select   class="select2"  id="carNumberSelect2">
											<option value=''></option>
										</select>
										<div class="s_del_icon" (click)='del_carNumber()'>x</div>
									</div>
								</div> -->

								<div class="top_module top_module_box">
									<span class="module_text">手机号码</span>
									<div class="s_hover_box">
										<select class="select2" id="phoneSelect2">
											<option value=''></option>
										</select>
										<div class="s_del_icon" (click)='delPhone()'>x</div>
									</div>
								</div>

								<div class="top_module">
									<span class="module_text">姓名</span>
									<div class="s_hover_box">
										<select class="select2" id="nameSelect2">
											<option value=''></option>
										</select>
										<div class="s_del_icon" (click)='delName()'>x</div>
									</div>
								</div>

								<!-- <div class="top_module top_module_box">
									<span class="top_module_label module_text">手机号码</span>
									<input class="module_inp" [(ngModel)]="tableParam.phone" type="text" placeholder="手机号码"/>
								</div>

								<div class="top_module top_module_box">
									<span class="top_module_label module_text">姓名</span>
									<input class="module_inp" [(ngModel)]="tableParam.name" type="text" placeholder="姓名"/>
								</div> -->

								<!-- <div class="selectDate top_module">
									<table-select-date [notInit]='true' (outerTime)="getSelectTableTime($event)" ></table-select-date>
								</div> -->

								<div class="top_module top_module_box">
									<span class="top_module_label module_text">是否关注过公众号</span>
									<select name="" class="top_module_select" [(ngModel)]="tableParam.isFollow">
										<option value="0">全部</option>
										<option value="1">关注过</option>
										<option value="2">未关注</option>
									</select>
								</div>

								<div class="top_module top_module_box">
									<span class="top_module_label module_text">小程序类型</span>
									<select name="" class="top_module_select" [(ngModel)]="tableParam.appletsCode">
										<option value="">全部</option>
										<option value="0001">随你运</option>
										<option value="0004">随身修</option>
										<option value="0008">汉德收款</option>
										<option value="0009">云天随你运</option>
									</select>
								</div>

								<button class="btn btn-primary" (click)="tableSearch()">查询</button>
								<button class="btn btn-primary" (click)="exportByBindCar(bindCarModal)">绑定车辆导出</button>
							</div>
							<!-- <div class="right top-search">
								<input type="text" [(ngModel)]="tableParam.searchKey" (change)="tableSearch()" class="search-input" placeholder="姓名">
								<span class="top-search-box">
									<button class="top-search-btn" type="button" (click)="tableSearch()"> <i class="fa fa-search"></i></button>
								</span>
							</div> -->
						</div>
						<div class="table_scroll">
							<table
								class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
								<thead>
									<tr>
										<th>手机号码</th>
										<th>姓名</th>
										<th>绑定车辆</th>
										<th>是否关注过公众号</th>
										<th>小程序类型</th>
										<th>注册时间</th>
										<th>昵称</th>
										<th>头像</th>
									</tr>
								</thead>
								<tbody>
									<tr *ngFor="let row of tableData">
										<td>{{row.phone}}</td>
										<td>{{row.name}}</td>
										<td>
											<button type="button" (click)="viewRow(row,viewCarModal)">查看</button>
										</td>
										<td>
											<span *ngIf="row.isFollow == '1'" class="green">关注过</span>
											<span *ngIf="row.isFollow == '0'" class="orange">未关注</span>
										</td>
										<td>
											<span *ngIf="row.appletsCode == '0001' || row.appletsCode == ''">随你运</span>
											<span *ngIf="row.appletsCode == '0008'">汉德收款</span>
											<span *ngIf="row.appletsCode == '0009'">云天随你运</span>
											<span *ngIf="row.appletsCode == '0004'">随身修</span>
										</td>
										<td>{{row.createTime}}</td>
										<td>{{row.nickName}}</td>
										<td><img [src]="row.userPhoto" class="imgPhoto" /></td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="table-fix clearfix">
							<paginator [totalRecords]="totalCount" [rows]="pageSize" [currentPage]="curPage - 1"
								(onPageChange)="paginate($event)"></paginator>
							<button type="button" class="btn default refresh_btn" (click)="refresh()"><i
									class="fa fa-refresh"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</sa-widgets-grid>
</div>



<!-- 审核内容分配   弹窗-->
<section bsModal #viewCarModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
	aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content" style="width: 800px;">
			<div class="modal-header">
				<button type="button" class="close" (click)="closeViewCarModal(viewCarModal)" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">查看</h4>
			</div>
			<form class="form-horizontal" role="form" novalidate="novalidate">
				<div class="modal-body">
					<button *ngIf="isShowAdd" type="button" class="btn btn-primary" style="margin-bottom: 10px;"
						(click)="addViewCar(addViewCarModal)">添加</button>
					<div class="row form-horizontal table_scroll" *ngIf="viewCarData.length != 0" style="max-height:400px">
						<!-- <div>
							<div class="hang">
								<div>车牌号</div>
								<div>绑定时间</div>
								<div>绑定情况</div>
								<div class="lastDiv">操作</div>
							</div>
							<div class="lie">
								<ul *ngFor="let row of viewCarData; let i = index" [attr.data-index]="i">
									<li>{{row.carNumber}}</li>
									<li>{{row.createTime}}</li>
									<li>
										<span *ngIf="row.selected != 1" style="color: white;opacity: 0;">未绑定</span>
										<span *ngIf="row.selected == 1" class="green">当前绑定</span>
									</li>
									<li class="lastDiv"><button type="button" (click)="deleteViewCar(row)">删除</button></li>
								</ul>
							</div>
						</div> -->
						<table
							class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
							<thead>
								<tr>
									<th>车牌号</th>
									<th>设备ID</th>
									<th>车辆所属</th>
									<th>公司名称</th>
									<th>绑定时间</th>
									<th>绑定情况</th>
									<th>审核状态</th>
									<th *ngIf="isShowDel">操作</th>
								</tr>
							</thead>
							<tbody class="carBody">
								<tr *ngFor="let row of viewCarData; let i = index" [attr.data-index]="i">
									<td>{{row.carNumber}}</td>
									<td>{{row.deviceId}}</td>
									<td>
										<span *ngIf="row.carOwner == 0">个人</span>
										<span *ngIf="row.carOwner == 1">车队</span>
									</td>
									<td>{{row.companyName}}</td>
									<td>{{row.createTime}}</td>
									<td>
										<span *ngIf="row.selected == 1" class="green">当前绑定</span>
									</td>
									<td>
										<span *ngIf="row.auditStatus == 1">暂未认证</span>
										<span *ngIf="row.auditStatus == 2" class="green">认证成功</span>
										<span *ngIf="row.auditStatus == 3" class="red">认证失败</span>
										<span *ngIf="row.auditStatus == 4">认证中</span>
									</td>
									<td *ngIf="isShowDel">
										<button type="button" (click)="detailRow(row)">详情</button>
										<button *ngIf="row.carOwner == 0" type="button" (click)="deleteViewCar(row)">删除</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div *ngIf="viewCarData.length == 0" style="text-align: center;">暂无绑定车辆数据</div>
				</div>
			</form>
		</div>
	</div>
</section>
<!-- 审核内容分配 弹窗end-->

<!-- 新增审核人员   弹窗-->
<section bsModal #addViewCarModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
	aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content" style="width: 800px;">
			<div class="modal-header">
				<button type="button" class="close" (click)="viewCarClose(addViewCarModal)" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">添加</h4>
			</div>
			<div class="modal-body">
				<div class="row form-horizontal">
					<!-- <div class="form-group">
						<label class="control-label col-sm-2 no-padding-right">车牌号码<sup>*</sup></label>
						<div class="col-sm-10">
							<div class="clearfix fix_select2">
								<input type="hidden" class="form-control" id="carNumberInput" name="carNumberInput"
									[(ngModel)]='carNumberSubList'>
								<select id="patchSelect2" class="select2 form-control"
									style="width:100%"></select>
									<div class="s_del_icon" (click)="delCarNumberSelect()">x</div>
							</div>
						</div>
					</div> -->
					<div class="form-group">
						<label class="control-label col-sm-2 no-padding-right">车牌号码<sup>*</sup></label>
						<div class="col-sm-10">
							<input class="form-control" type="hidden" [(ngModel)]="carSelectData.carNumber" name="carNumber" />
							<div class="clearfix">
								<div class="s_hover_box" style="display: block">
									<select class="select2 form-control" id="patchSelect2" style="width: 100%">
										<option value=""></option>
									</select>
									<div class="s_del_icon" (click)="delCarNumberSelect()">x</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" (click)="viewCarClose(addViewCarModal)">取消</button>
				<button type="button" class="btn btn-primary" (click)="viewCarSubmit(addViewCarModal)">提交</button>
			</div>
		</div>
	</div>
</section>
<!-- 新增审核人员 弹窗end-->


<!--  绑定车辆导出  弹窗-->
<section bsModal #bindCarModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
	aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" (click)="viewCarClose(bindCarModal)" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">绑定车辆导出</h4>
			</div>
			<form id="bindCarForm" class="form-horizontal" role="form" novalidate="novalidate"
				[saBootstrapValidator]="validatorOptions">
				<div class="modal-body">
					<div class="row form-horizontal">
						<div class="form-group col-xs-12">
							<!-- <label class="col-xs-2 control-label">手机号码<sup>*</sup></label> -->
							<label class="col-xs-2 control-label">手机号码</label>
							<div class="col-xs-10">
								<input class="form-control" name="phoneNumber" type="text" style="border-radius: 4px !important;"
									[(ngModel)]="bindCarForm.phone" />
								<div class="operationBtn module_line">
									<button type="button" class="btn btn-primary" style="border-radius: 4px;">导入
										<input type="file" class="up" (change)="fileChange($event.target.files, 'phone')"
											name="upload_phone" (click)='clearFile()' [(ngModel)]='filePhoneUp' placeholder='' />
									</button>

									<button type="button" class="btn btn-primary" [disabled]="!bindCarForm.phone"
										(click)="preView('phone', preViewModal)" style="border-radius: 4px;">预览</button>
									<button type="button" class="btn btn-primary"
										(click)="download_template('/resources/template/phone_number-Template.xlsx', '手机号码模板.xlsx')"
										style="border-radius: 4px;">下载模板</button>
								</div>
							</div>
						</div>

						<div class="form-group col-xs-12">
							<label class="col-xs-2 control-label">绑定车辆</label>
							<div class="col-xs-10">
								<input type="text" class="form-control" [(ngModel)]="bindCarForm.carNumber" name="carNm"
									style="border-radius: 4px !important;" />
								<div class="operationBtn module_line">
									<button type="button" class="btn btn-primary" style="border-radius: 4px;">导入
										<input type="file" class="up" (change)="fileChange($event.target.files, 'car')" name="upload_car"
											(click)='clearFile()' [(ngModel)]='fileCarUp' placeholder='' />
									</button>

									<button type="button" class="btn btn-primary" (click)="preView('car', preViewModal)"
										[disabled]="!bindCarForm.carNumber" style="border-radius: 4px;">预览</button>
									<button type="button" class="btn btn-primary"
										(click)="download_template('/resources/template/binding_car-Template.xlsx', '车辆号码模板.xlsx')"
										style="border-radius: 4px;">下载模板</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" (click)="closeCarModal(bindCarModal)">取消</button>
					<button type="button" class="btn btn-primary" (click)="handleConfirm(bindCarModal)">确认</button>
				</div>
			</form>
		</div>
	</div>
</section>

<section bsModal #preViewModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
	aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header" style="border-bottom:none">
				<button type="button" class="close" (click)="handlePreView(preViewModal)" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">{{title}}</h4>
			</div>
			<div class="listContent">
				<div *ngFor="let item of preViewData">
					{{item}}
				</div>
			</div>
			<div class="modal-footer" style="border-top:none">
				<button type="button" class="btn btn-primary" (click)="handlePreView(preViewModal)">确认</button>
			</div>
		</div>
	</div>
</section>
<!--绑定车辆导出  弹窗end-->
<style lang="scss">
	.imgPhoto {
		width: 30px;
	}

	.select2-search__field {
		width: 100% !important;
	}

	.operationBtn {
		margin-top: 18px;
	}

	.operationBtn button {
		height: 32px;
	}

	.operationBtn span {
		text-align: center;
		position: relative;
		text-decoration: none;
		outline: none;
		color: #409eff;
		font-size: 12px;
		margin-top: 5px;
	}

	.operationBtn span:hover {
		cursor: pointer;
	}

	.module_line .btn {
		position: relative;
	}

	.module_line .up {
		opacity: 0;
		position: absolute;
		height: 32px;
		width: 120px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		cursor: pointer;
	}

	.listContent {
		max-height: 500px;
		overflow: auto;
	}

	.listContent div {
		padding: 8px 15px
	}

	:host ::ng-deep .help-block {
		position: relative;
		bottom: 50px;
		margin-left: 0px !important;
	}


	/* .hang div{
		display: inline-block;
		width: 28%;
		text-align: center;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		border-right: 1px solid #ddd;
		height: 40px;
		line-height: 40px;
		font-weight: bold;
		background-color: #eee;
	}
	.hang div:first-child{
		border-left: 1px solid #ddd;
	}
	.lie ul:nth-child(2n+1) li{
		background-color: #eee;
	}
	.lie ul li{
		display: inline-block;
		width: 28%;
		text-align: center;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #ddd;
		border-right: 1px solid #ddd;
	}
	.lie ul li span{
		height: 40px;
		line-height: 40px;
		width: 100%;
	}
	.lie ul li:first-child{
		border-left: 1px solid #ddd;
	}
	.hang .lastDiv,.lie ul .lastDiv{
		width: 15%;
	} */
</style>